<template>
    <div class="pb-24 bg-gray-100">
        <userAddressCom class="mb-4"></userAddressCom>
        <productCardCom1 class="mb-4" :productList="selectProductListRef"></productCardCom1>
        <nut-cell class="mb-4" title="支付方式" desc="微信支付"></nut-cell>
    </div>
    <div
        class="fixed bottom-0 w-screen p-4 pb-8 box-border bg-white flex justify-between font-semibold"
    >
        <div class="flex items-center">
            <p>总价：</p>
            <span class="text-red-600">¥{{ totalPrice }}</span>
        </div>
        <nut-button type="primary" @click="createOrder()">提交订单</nut-button>
    </div>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, computed } from 'vue'

import userAddressCom from './userAddress.vue'
import productCardCom1 from './productCard.vue'

import { productList } from '@/config/index'

const linkToOrderResult = () => {
    console.log('跳转')
    Taro.navigateTo({
        url: `/pages/order/result/index`
    })
}

const Instance = Taro.getCurrentInstance()
const urlParams = Instance.router?.params
const { from, product_id, product_ids } = urlParams

let selectProductListRef
// 1.链接判断参数来源，获取商品信息、总价
if (from === 'cart') {
    // 从购物车来
    selectProductListRef = ref(
        productList.filter((product) => product_ids.split(',').includes(String(product.id)))
    )
} else {
    // 从商详来
    console.log('product_ids', product_id)
}
// 2.获取用户地址信息
// 3.获取支付方式

// 4.底部逻辑
const totalPrice = computed(() => {
    let total_price = 0
    selectProductListRef.value.forEach((product) => {
        total_price += product.price * product.count
    })
    return total_price
})
const createOrder = () => {
    console.log('创建订单')
}
</script>
